<template>
  <footer class="app-footer">
    <div class="footer-content">
      <div class="footer-main">
        <!-- 左侧链接区域 -->
        <div class="footer-links">
          <div class="footer-column">
            <h3>{{ t('footer.company.title') }}</h3>
            <ul>
              <li><a href="/about">{{ t('footer.company.about') }}</a></li>
              <li><a href="/privacy">{{ t('footer.company.privacy') }}</a></li>
              <li><a href="/intro">{{ t('footer.company.intro') }}</a></li>
              <li><a href="/awards">{{ t('footer.company.awards') }}</a></li>
              <li><a href="/media">{{ t('footer.company.media') }}</a></li>
              <li><a href="/careers">{{ t('footer.company.careers') }}</a></li>
              <li><a href="/privacy-policy">{{ t('footer.company.privacyPolicy') }}</a></li>
              <li><a href="/cookie-policy">{{ t('footer.company.cookiePolicy') }}</a></li>
              <li><a href="/terms">{{ t('footer.company.terms') }}</a></li>
              <li><a href="/affiliate">{{ t('footer.company.affiliate') }}</a></li>
              <li><a href="/distribution">{{ t('footer.company.distribution') }}</a></li>
            </ul>
          </div>

          <div class="footer-column">
            <h3>{{ t('footer.support.title') }}</h3>
            <ul>
              <li><a href="/contact">{{ t('footer.support.contact') }}</a></li>
              <li><a href="/shipping">{{ t('footer.support.shipping') }}</a></li>
              <li><a href="/warranty">{{ t('footer.support.warranty') }}</a></li>
              <li><a href="/repair">{{ t('footer.support.repair') }}</a></li>
              <li><a href="/compliance">{{ t('footer.support.compliance') }}</a></li>
              <li><a href="/faq">{{ t('footer.support.faq') }}</a></li>
              <li><a href="/product-faq">{{ t('footer.support.productFaq') }}</a></li>
              <li><a href="/shipping-faq">{{ t('footer.support.shippingFaq') }}</a></li>
              <li><a href="/labels">{{ t('footer.support.labels') }}</a></li>
              <li><a href="/warranty">{{ t('footer.support.warrantyPolicy') }}</a></li>
              <li><a href="/global">{{ t('footer.support.global') }}</a></li>
              <li><a href="/student">{{ t('footer.support.student') }}</a></li>
            </ul>
          </div>

          <div class="footer-column">
            <h3>{{ t('footer.browse.title') }}</h3>
            <ul>
              <li><a href="/categories/bestsellers">{{ t('footer.browse.bestsellers') }}</a></li>
              <li><a href="/categories/female">{{ t('footer.browse.female') }}</a></li>
              <li><a href="/categories/male">{{ t('footer.browse.male') }}</a></li>
              <li><a href="/categories/couple">{{ t('footer.browse.couple') }}</a></li>
              <li><a href="/categories/luxury">{{ t('footer.browse.luxury') }}</a></li>
              <li><a href="/categories/water">{{ t('footer.browse.water') }}</a></li>
              <li><a href="/categories/condom">{{ t('footer.browse.condom') }}</a></li>
              <li><a href="/categories/massage">{{ t('footer.browse.massage') }}</a></li>
              <li><a href="/categories/gift">{{ t('footer.browse.gift') }}</a></li>
              <li><a href="/categories/new">{{ t('footer.browse.new') }}</a></li>
            </ul>
          </div>

          <div class="footer-column">
            <h3>{{ t('footer.follow.title') }}</h3>
            <ul>
              <li><a href="https://volonte.lelo.com" target="_blank">{{ t('footer.follow.blog') }}</a></li>
              <li><a href="https://instagram.com/lelo_official" target="_blank">{{ t('footer.follow.instagram') }}</a></li>
              <li><a href="https://twitter.com/lelo_official" target="_blank">{{ t('footer.follow.twitter') }}</a></li>
              <li><a href="https://facebook.com/lelo.official" target="_blank">{{ t('footer.follow.facebook') }}</a></li>
              <li><a href="https://www.lelo.com/audio-erotica" target="_blank">{{ t('footer.follow.audio') }}</a></li>
              <li><a href="/experts">{{ t('footer.follow.experts') }}</a></li>
            </ul>
          </div>
        </div>

        <!-- 右侧信息区域 -->
        <div class="footer-info">
          <div class="legal-info">
            <p>{{ t('footer.legal.copyright') }}</p>
            <p class="age-warning">{{ t('footer.legal.ageWarning') }}</p>
          </div>
          
          <div class="payment-methods">
            <img src="/images/payment/Asia-payment-methods.svg" alt="支付方式" />
          </div>

          <div class="qr-code">
            <!-- <img src="/images/qr-code.png" alt="QR Code" class="qr-image" />
            <img src="/images/bazar-voice.svg" alt="Bazar Voice" class="bv-logo" /> -->
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<style lang="scss" scoped>
.app-footer {
  background: #000;
  color: #fff;
  padding: 60px 0;
  width: 100%;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  
  @media (max-width: 768px) {
    padding: 0 20px;
  }
}

.footer-main {
  display: flex;
  gap: 80px;
  min-height: 500px;
  
  @media (max-width: 1024px) {
    flex-direction: column;
    gap: 40px;
    min-height: auto;
  }
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  flex: 1;
  padding-top: 20px;
  
  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0;
  }
  
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.footer-info {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-self: flex-end;
  padding-bottom: 20px;
  
  @media (max-width: 1024px) {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
  }
}

.footer-column {
  h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    li {
      margin-bottom: 12px;
      
      a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 13px;
        transition: color 0.3s ease;
        
        &:hover {
          color: #fff;
        }
      }
    }
  }
}

.legal-info {
  p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0;
    
    &.age-warning {
      margin-top: 10px;
      max-width: 400px;
      line-height: 1.6;
    }
  }
}

.payment-methods {
  display: flex;
  align-items: center;
  
  img {
    width: 100%;
    height: auto;
    max-width: 400px;
  }
}

.qr-code {
  display: flex;
  gap: 20px;
  align-items: center;
  
  .qr-image {
    width: 80px;
    height: 80px;
  }
  
  .bv-logo {
    height: 40px;
    width: auto;
  }
  
  @media (max-width: 1024px) {
    justify-content: center;
  }
}
</style> 